<template>
  <div class="mapmain">
    <span
      class="corner corner-left-top"
      style="height: 12px; width: 12px; border: 4px solid rgb(0, 170, 255)"
    ></span>
    <span
      class="corner corner-right-top"
      style="height: 12px; width: 12px; border: 4px solid rgb(0, 170, 255)"
    ></span>
    <span
      class="corner corner-left-bottom"
      style="height: 12px; width: 12px; border: 4px solid rgb(0, 170, 255)"
    ></span>
    <span
      class="corner corner-right-bottom"
      style="height: 12px; width: 12px; border: 4px solid rgb(0, 170, 255)"
    ></span>
    <div id="chart_map" style="width: 100%; height: 610px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import zhongguo from "./data/ZGmap.json";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chart_map"));
    this.initMap();
    window.addEventListener("resize", function () {
      this.myChart.resize();
    });
  },
  methods: {
    initMap() {
      const option = {
        // 背景颜色
        // backgroundColor: "#404a59",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100,
        },
        // 地图配置
        geo: {
          map: "china",
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
      };
      echarts.registerMap("china", zhongguo);
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.mapmain {
  position: relative;
  border: 1px solid #3678ca;

  margin: 0 10px;
}
.corner {
  position: absolute;
  background-color: transparent;
}
.corner-left-top {
  left: -1px;
  top: -1px;
  border-right: transparent !important;
  border-bottom: transparent !important;
}
.corner-right-top {
  right: -1px;
  top: -1px;
  border-left: transparent !important;
  border-bottom: transparent !important;
}
.corner-left-bottom {
  left: -1px;
  bottom: -1px;
  border-right: transparent !important;
  border-top: transparent !important;
}
.corner-right-bottom {
  right: -1px;
  bottom: -1px;
  border-left: transparent !important;
  border-top: transparent !important;
}
</style>